<template>
  <div class="opera">
    <slot></slot>
    <table>
      <thead>
        <tr>
          <td>设备编号</td>
          <td>设备名称</td>
          <td>设备状态</td>
          <td>设备分类</td>
          <td>数量</td>
          <td>单价</td>
          <td>购置日期</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in deviceList.list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td v-html="transfromStatus(item.status)"></td>
          <td>{{ transformCategory(item.category) }}</td>
          <td>{{ item.number }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.time }}</td>
          <td>
            <el-button plain class="detail" @click="detail(item)">详情</el-button>
            <span v-if="item.status == 'STATUS1'">
              <el-button type="primary" @click="edit(item)">编辑</el-button>
              <el-button type="primary" @click="audit(item.id)">审核</el-button>
            </span>
            <span v-else-if="item.status == 'STATUS2'">
              <el-button type="primary">入库</el-button>
            </span>
            <span v-else-if="item.status == 'STATUS6'">

            </span>
            <span v-else>
              <el-button type="primary" @click="dialogVisible = true">修改状态</el-button>

              <el-dialog title="设置状态" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                设备状态
              <el-select v-model="status" placeholder="全部状态">
                <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="changeStatus(item)">确 定</el-button>
                </span>
              </el-dialog>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="block pages">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1"
        :page-sizes="[10, 20, 30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="deviceList.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceOpera",
  data() {
    return {
      options: [],
      currentPage1: 1,
      deviceList: {},
      querys: {},
      dialogVisible: false,
      status:''
    }
  },
  props: ['pathname','statuses'],
  methods: {
    transformCategory(val) {
      switch (val) {
        case 'CATE1':
          return '房屋及构筑物';
        case 'CATE2':
          return '仪器仪表';
        case 'CATE3':
          return '机电设备';
        case 'CATE4':
          return '卫生医疗器械'
        case 'CATE5':
          return '文体设备11111'
        case 'CATE6':
          return '文物及陈列品'
        case 'CATE7':
          return '图书'
        case 'CATE8':
          return '工具、量具和器皿'
        case 'CATE9':
          return '行政办公设备'

      }
    },
    transfromStatus(val) {
      switch (val) {
        case 'STATUS1':
          return `未审核<i class='line green'></i>`;
        case 'STATUS2':
          return `已审核<i class='line blue'></i>`;
        case 'STATUS3':
          return `闲置中<i class='line green'></i>`;
        case 'STATUS4':
          return `使用中<i class='line deepgreen'></i>`
        case 'STATUS5':
          return `维修中<i class='line gray'></i>`
        case 'STATUS6':
          return `报废中<i class='line red'></i>`
      }
    },
    handleSizeChange(val) {
      this.querys.limit = val;
      this.getQueryResult()
    },
    handleCurrentChange(val) {
      this.querys.page = val;
      this.getQueryResult()
    },
    edit(obj) {
      this.$store.commit('changeDefault', false)
      this.$router.push({
        path: `/home/register/edit?obj=${JSON.stringify(obj)}`
      })

    },
    detail(obj) {
      this.$store.commit('changeDefault', false)
      this.$router.push({
        path: `/home/register/detail?obj=${JSON.stringify(obj)}`
      })

    },
    audit(id) {
      this.$axios({
        method: 'post',
        url: '/pre-check',
        data: {
          id
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          this.$message({
            message: '审核成功',
            type: 'success'
          });
        }
        this.$router.go(0)
      })
    },
    changeStatus(obj) {
      this.dialogVisible = false
      this.$axios({
        method:'post',
        url:'/equip-set',
        data: {
          id:obj.id,
          status: this.status
        }
      }).then(res => {
       if(res.data.code == 0) {
        this.$message({
          message: '更改状态成功',
          type: 'success'
        });
        this.$router.go(0)
       }
      })
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    getQueryResult() {
      this.$axios({
        method: "post",
        url: this.pathname,
        data: {
          pageNo: this.querys.page || 1,
          pageSize: this.querys.limit || 10,
          name: this.querys.name,
          id: this.querys.id,
          status: this.querys.status,
          category: this.querys.category
        }
      }).then(res => {
        this.deviceList = res.data.data
      })
    }
  },
  created() {
    this.$axios({
      method: "get",
      url: '/category-list'
    }).then(res => {
      this.options = res.data.data
    })
    var _this = this;
    this.$bus.$on('changeQueryData', (val) => {
      _this.querys = val
      _this.getQueryResult()
    })
    this.getQueryResult()
  }
}
</script>

<style lang="less" scoped>
.opera {
  min-width: 1000px;
  max-width: 1200px;

  table {
    width: 100%;
  }

  tr {
    line-height: 30px;
    border-bottom: 1px solid #ccc;

    &:hover {
      background-color: #F5F7FA;
    }
  }

  td {
    padding: 10px 20px;
    text-align: center;
  }

  .pages {
    margin-top: 20px;
  }
}

.line {
  display: inline-block !important;
  width: 6px;
  height: 10px;
}

.green {

  background-color: green;
}

.blue {

  background-color: blue;
}

button {
  margin-right: 6px;
  padding: 5px 10px !important;
}
</style>